<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <body>

        <ui:composition template="./../templates/templatePrincipal.xhtml">

            <ui:define name="titulosesion">
                titulosesion
            </ui:define>

            <ui:define name="menuderecho">
                menuderecho
            </ui:define>

            <ui:define name="contenido">
                <h:form id="form">

                    <p:dataTable id="datalist" var="usuario" value="#{personaController.lstPersonas}" rowKey="#{persona.idpersona}"
                                 selection="#{personaController.objPersona}" selectionMode="single">

                        <f:facet name="header">
                            Click "View" button after selecting a row to see details
                        </f:facet>

                        <p:column headerText="Id">
                            #{persona.idpersona}
                        </p:column>

                        <p:column headerText="Nombres">
                            #{persona.nombres}
                        </p:column>

                        <p:column headerText="Apellidos" >
                            #{persona.apellidos}
                        </p:column>

                        <p:column headerText="eMail">
                            #{persona.email}
                        </p:column>

                        <p:column headerText="Telefono">
                            #{persona.telefono}
                        </p:column>

                        <f:facet name="footer">
                            <p:commandButton id="viewButton" value="View" icon="ui-icon-search"
                                             update=":form:display" oncomplete="PF('carDialog').show()"/>
                        </f:facet>

                    </p:dataTable>

                    <p:dialog id="dialog" header="Detalle Persona" widgetVar="carDialog" resizable="false"
                              width="200" showEffect="clip" hideEffect="fold" modal="true">

                        <h:panelGrid id="display" columns="2" cellpadding="4">

                            <f:facet name="header">
                                <h:outputText value="#{personaController.objPersona.nombres}"/>
                            </f:facet>

                            <h:outputText value="Id:" />
                            <h:outputText value="#{personaController.objPersona.idpersona}" />

                            <h:outputText value="Apellidos:" />
                            <h:outputText value="#{personaController.objPersona.apellidos}" />

                            <h:outputText value="Telefono:" />
                            <h:outputText value="#{personaController.objPersona.telefono}" />

                            <h:outputText value="Email:" />
                            <h:outputText value="#{personaController.objPersona.email}" />
                        </h:panelGrid>
                    </p:dialog>

                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
